/**
 * 用于封装 echarts
 */

import type { ECharts, EChartsOption } from "echarts";
import { useEffect, useRef, FC } from "react";
import * as echarts from "echarts";

interface IProps {
  options: EChartsOption;
}

const MyChart: FC<IProps> = ({ options }) => {
  const chart = useRef<ECharts>();
  const boxRef = useRef(null);

  useEffect(() => {
    console.log("effect");
    // 由于该 effect 会触发多次，但实例化只需要一次，可以做个判断
    if (!chart.current) {
      // 实例化 echarts
      chart.current = echarts.init(boxRef.current as unknown as HTMLElement);
    }

    // 调用它的 setOption 来绘制图表
    chart.current.setOption(options);
  }, [options]);

  return (
    // 容器
    <div className="box" ref={boxRef}></div>
  );
};

export default MyChart;
